<template>
  <div>
    <a-input-group>
      <a-select :style="{ width: '120px' }" placeholder="请选择" v-model="selInfo.code" @change="selTitle">
        <a-option v-for="item of options" :key="item.value" :label="item.label" :value="item.value" />
      </a-select>
      <a-input-search :style="{ width: '200px' }" placeholder="second" v-model="selInfo.value" allow-clear @search="search" @clear="clear">
        <template #suffix>
          <a-popover position="br" trigger="click" v-model:popup-visible="showPopover" @click="selInfo.value ? (selInfo.mulValue = selInfo.value) : ''">
            <icon-more-vertical style="cursor: pointer; margin-left: 5px" />
            <template #content>
              <a-textarea placeholder="请输入，一行一个" v-model="selInfo.mulValue" :style="{ width: '200px', height: '200px' }" />
              <div class="footer">
                <div class="fl"> <a-button type="outline" size="mini" @click="selInfo.mulValue = ''">清空</a-button> </div>
                <div class="fr">
                  <a-button type="outline" size="mini" @click="showPopover = false">取消</a-button>
                  <a-button type="outline" size="mini" style="margin-left: 5px" @click="search">搜索</a-button>
                </div>
              </div>
            </template>
          </a-popover>
        </template>
      </a-input-search>
    </a-input-group>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue'
  import _ from 'lodash-es'
  export default defineComponent({
    name: 'SearchItem',
    props: ['options'],
    emits: ['search'],
    setup(props, { emit }) {
      let selInfo: any = reactive({})
      selInfo.code = props.options[0].value
      selInfo.labelCode = selInfo.code
      selInfo.label = props.options[0].label
      let showPopover = ref(false)
      const selTitle = (e: any) => {
        props.options.forEach((el: any) => {
          if (e == el.value) {
            selInfo.label = el.label
          }
        })
      }
      const search = () => {
        if (selInfo.mulValue) selInfo.value = selInfo.mulValue.split('\n').join(',')
        selInfo.mulValue = ''
        emit('search', selInfo)
        showPopover.value = false
      }

      const clear = () => {
        selInfo.mulValue = ''
        selInfo.value = ''
        emit('search', selInfo)
      }

      return {
        selInfo,
        showPopover,
        search,
        selTitle,
        clear,
      }
    },
  })
</script>

<style lang="less" scoped>
  .footer {
    // border-top: 1px solid #999;
    height: 30px;
    line-height: 30px;
  }
</style>
